
<template>
  <div class="dialog-container">
    <el-dialog
      title="用户信息"
      :visible.sync="itemDialog.avliable"
      width="30%"
      :before-close="handleClose">
      <!-- 查看 -->
      <p v-if="itemDialog.action =='upd'">{{itemDialog.item.id}}</p>
      <p v-if="itemDialog.action =='upd'">{{itemDialog.item.title}}</p>
      <p v-if="itemDialog.action =='upd'">{{itemDialog.item.author}}</p>
      <p v-if="itemDialog.action =='upd'">{{itemDialog.item.pageviews}}</p>
      <p v-if="itemDialog.action =='upd'">{{itemDialog.item.status}}</p>
      <p v-if="itemDialog.action =='upd'">{{itemDialog.item.display_time}}</p>
      <!-- 新增 and 编辑 -->
      <el-form v-if="itemDialog.action =='add'" ref="form" :model="user" label-width="120px">
      <el-form-item label="loginname">
        <el-input v-model="user.loginname" placeholder="loginname"></el-input>
      </el-form-item>
      <el-form-item label="password">
        <el-input v-model="user.password" placeholder="password"></el-input>
      </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="itemDialog.avliable = false">取 消</el-button>
        <el-button type="primary" @click.native="thandlesure">确 定</el-button>
      </span>
    </el-dialog>  
  </div>  
</template>

<script>
/**
 * 用$emit向父组件触发一个事件，父组件监听这个事件就行了。
 * 直接用this.$parent.xxxx这样直接调用父组件的方法。
 */
export default {
  data() {
    return {
      dialogVisible: false
      ,user:{
        password:'',
        loginname:''
      }
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
    },
    thandlesure() {
      // console.log(`action:` + this.itemDialog.action)
      this.itemDialog.avliable = false
      let temDialog =  this.itemDialog;
      if(temDialog.action =='add'){
        console.log(this.user);
      }
      this.$emit('taction', event.target, this.itemDialog.action, this.itemDialog.item )
    }
  },
  props: {
    itemDialog: {
      required: true
    }
  },
  created() {
  },
  watch: {
    itemDialog(val, oldval) {
      // console.log(`new:` + val + `old:` + oldval)
      this.dialogVisible = val
      this.itemDialog.avliable = val
    }
  }
}
</script>
